<template>
  <div class="echart_view" ref="echart"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, inject, watch } from "vue";
import echarts from 'echarts';

const props = defineProps({
  options: Object,
  theme: String,
});

const echart = ref();
let chart;
let initChart = () => {
  chart = echarts.init(echart.value, props.theme);
  props.options && chart.setOption(props.options);
};

onMounted(() => {
  initChart();
});

watch(
  () => props.theme,
  () => {
    chart.dispose();
    initChart();
  }
);
</script>
<style lang="scss" scoped>
.echart_view {
  width: 100%;
  height: 100%;
}
</style>
